import React,{useState,useEffect} from 'react'
import {Button,Toast} from "react-vant"
import axios from '../utils/axios'
import {useNavigate} from "react-router-dom"
const Style = {
    "width":"100%",
    "height":"100%",
    "paddingTop":"100px"

}
function Login() {
  let navigate = useNavigate()
  let [ipt,setIpt] = useState("")
  let [ipt1,setIpt1] = useState("")
  let [btnIPt,setBtnipt] = useState("获取验证码")
  let [timmercount,setTimmercount] = useState(5) // 倒计时每秒减去的时间
  let [flag,setFlag] = useState(true) // 用于控制按钮显示时间还是验证码
  let timmer = null
  let [yzm,setYzm] = useState(0)
  let num = 5
  // 声明一个普通变量，这个变量的值和useState声明的响应式变量的值保持一致
  let btnclick = ()=> {
     setFlag(false)
     setTimmercount(5)
     num = 5
     timmer =  setInterval(()=>{
        //  if (timmercount > 0) {
            setTimmercount((timmercount)=>timmercount - 1)
            num --
        //  } 
            if (num <= 0) {
                clearInterval(timmer)     
            }
            
     },1000)
     axios.get("/api/beforelogin").then(res=>{
         console.log(res.data);
         setYzm(res.data.yzm)
     })

     
  }
  useEffect(()=>{
      window.localStorage.clear()
  },[])
  useEffect(()=>{
    //  console.log(timmercount);
     if (timmercount <= 0 ) {
        setTimmercount(0)
        setFlag(true)
        clearInterval(timmer)
     }
  },[timmercount])
  // 登陆的函数 
  let loginfn = ()=>{
    console.log(ipt,ipt1,yzm);
    axios.get("/api/login",{
        params:{
            username:ipt,
            yzm:ipt1
        }
      
    }).then(res=>{
        console.log(res);
        if (res.data.code === 1) {
             Toast.success(res.data.msg)
             window.localStorage.setItem("token",res.data.token)
             navigate("/history")
        } else {
             Toast.fail(res.data.msg)
        }
    })
  }
  return (
    <div style={Style}>
        <div style={{"textAlign":"center"}}>
            <h2>绑定手机号</h2>
        </div>
        <div className='inpu-box'>
             <div>
                 <p style={{"paddingLeft": "40px"}}>
                     <span>手机号</span>
                 </p>
                  <div style={{"textAlign":"center","marginTop":"10px"}}>
                      <input type="text"  className='login-ipt' placeholder='&nbsp;&nbsp;请输入手机号' value={ipt} onChange={(e)=>setIpt(e.target.value)}/>
                  </div>
             </div>
             <div style={{"marginTop":"60px"}}>
             <p style={{"paddingLeft": "40px"}}>
                     <span>验证码</span>
                 </p>
                  <div style={{"textAlign":"center","marginTop":"10px","position":"relative"}}>
                      <input type="text" className='login-ipt'  placeholder='&nbsp;&nbsp;请输入验证码' value={ipt1} onChange={(e)=>setIpt1(e.target.value)}/>
                      <Button style={{"position":"absolute"}} size="mini" className="mybtn" onClick={btnclick} disabled={!flag}>{flag?btnIPt:timmercount}</Button>
                  </div>
             </div>
             <div className='sure-btn' onClick={loginfn}>确认</div>

        </div>
    </div>
  )
}

export default Login